<!-- author: xuett -->
<!-- date: 2023-02-07 09:26:42 -->
<!-- description: table-列设置 -->
<template>
  <G-drawer v-model:drawerShow="drawerShow" title="列设置" :show-header="true" :width="450">
    <template #content>
      <!-- <div class="column-header">
        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="checkAllChange">全选</el-checkbox>
      </div> -->
      <div class="column-content">
        <div v-for="(groupItem, groupIndex) in checkedList" :key="groupIndex" class="group-box">
          <template v-if="columnList[groupIndex].length">
            <el-divider> {{ groupIndex == 0 ? "固定在左侧" : groupIndex == 1 ? "不固定" : "固定在右侧" }} </el-divider>
            <el-checkbox-group v-model="checkedList[groupIndex]" @change="checkedChange(true)">
              <div v-for="(item, index) in columnList[groupIndex]" :key="item.prop">
                <el-checkbox :label="item.prop">
                  <div class="checkbox-box">
                    {{ item.label }}
                    <div class="operation-box">
                      <el-tooltip v-if="item.fixed != 'left'" effect="dark" content="左固定" placement="top">
                        <el-icon class="column-icon" @click.stop="changeFixed(0, index, groupIndex)"><CaretLeft /></el-icon>
                      </el-tooltip>
                      <el-tooltip v-if="item.fixed && item.fixed != ''" effect="dark" content="不固定" placement="top">
                        <el-icon class="column-icon" @click.stop="changeFixed(1, index, groupIndex)"><CircleClose /></el-icon>
                      </el-tooltip>
                      <el-tooltip v-if="item.fixed != 'right'" effect="dark" content="右固定" placement="top">
                        <el-icon class="column-icon" @click.stop="changeFixed(2, index, groupIndex)"><CaretRight /></el-icon>
                      </el-tooltip>
                    </div>
                  </div>
                </el-checkbox>
              </div>
            </el-checkbox-group>
          </template>
        </div>
      </div>
    </template>
    <template #footer>
      <div>
        <el-button type="primary" @click="onSubmit">确认</el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>
      <div>
        <el-button @click="handleReset">重置</el-button>
      </div>
    </template>
  </G-drawer>
</template>

<script setup>
const $props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  headerData: {
    type: Object,
    default: () => {}
  }
});

const $emit = defineEmits(["update:modelValue", "updateColumn"]);
const drawerShow = computed({
  get: () => $props.modelValue,
  set: (val) => $emit("update:modelValue", val)
});

//监听打开时，更新数据
watch(
  () => $props.modelValue,
  (newVal) => {
    if (newVal) {
      updateOriginColumn($props.headerData);
    }
  }
);

//更新源header
const updateOriginColumn = (headerData) => {
  let originHeader = headerData.originHeader ? JSON.parse(JSON.stringify(headerData.originHeader)) : [];
  let tableHeader = headerData.tableHeader ? JSON.parse(JSON.stringify(headerData.tableHeader)) : [];
  let curHeader = {};
  tableHeader.forEach((item) => {
    curHeader[item.label] = item;
  });
  for (let i = 0, len = originHeader.length; i < len; i++) {
    if (curHeader[originHeader[i].label]) {
      originHeader[i] = curHeader[originHeader[i].label];
    } else {
      originHeader[i].checked = false;
    }
  }
  state.tableHeader = originHeader;
  handleColumn();
};

const state = reactive({
  tableHeader: [],
  columnList: [[], [], []], //数据数组
  checkAll: false, //全选
  isIndeterminate: false, //半选
  checkedList: [[], [], []] //选中数组
});

const { columnList, checkedList } = toRefs(state);

//接收数据处理
const handleColumn = () => {
  let columnList = JSON.parse(JSON.stringify(state.tableHeader));
  state.columnList = [[], [], []];
  state.checkedList = [[], [], []];
  columnList.forEach((item) => {
    let index = 0;
    if (item.fixed == "left") {
      state.columnList[0].push(item);
      index = 0;
    } else if (item.fixed == "right") {
      state.columnList[2].push(item);
      index = 2;
    } else {
      state.columnList[1].push(item);
      index = 1;
    }
    if (item.checked == undefined || item.checked) {
      item.checked = true;
      state.checkedList[index].push(item.prop);
    }
  });
  checkedChange(false);
};

//全选change
// const checkAllChange = (val) => {
//   if (!val) {
//     state.checkedList = [[], [], []];
//   } else {
//     state.columnList.forEach((itemList, index) => {
//       state.checkedList[index] = itemList.map((item) => item.prop);
//     });
//   }
//   state.columnList.forEach((itemList) => {
//     itemList.forEach((item) => {
//       item.checked = val;
//     });
//   });
//   state.isIndeterminate = false;
// };

//选择change
const checkedChange = (val) => {
  let count = 0;
  state.checkedList.forEach((item) => {
    count += item.length;
  });
  if (state.tableHeader.length == count) {
    state.checkAll = true;
    state.isIndeterminate = false;
  } else if (count > 0) {
    state.isIndeterminate = true;
  } else {
    state.isIndeterminate = false;
  }
  if (val) {
    handleCheckedSign();
  }
};

//更新处理各项选中标志
const handleCheckedSign = () => {
  state.columnList.forEach((itemList, index) => {
    itemList.forEach((item) => {
      item.checked = state.checkedList[index].includes(item.prop);
    });
  });
};

//固定change
const changeFixed = (type, index, groupIndex) => {
  let curItem = state.columnList[groupIndex][index];
  state.columnList[groupIndex].splice(index, 1);
  if (type == 0) {
    curItem.fixed = "left";
  } else if (type == 1) {
    curItem.fixed = "";
  } else if (type == 2) {
    curItem.fixed = "right";
  }
  state.columnList[type].push(curItem);
  let i = state.checkedList[groupIndex].findIndex((key) => {
    return curItem.prop == key;
  });
  if (i != -1) {
    state.checkedList[type].push(curItem.prop);
    state.checkedList[groupIndex].splice(i, 1);
  }
  checkedChange(false);
};

//保存
const onSubmit = () => {
  let newColumnList = [...state.columnList[0], ...state.columnList[1], ...state.columnList[2]];
  newColumnList = newColumnList.filter((item) => item.checked);
  $emit("updateColumn", newColumnList);
  handleClose();
};

//取消
const handleClose = () => {
  drawerShow.value = false;
};

//重置
const handleReset = () => {
  state.tableHeader = JSON.parse(JSON.stringify($props.headerData.originHeader));
  handleColumn();
};
</script>

<style scoped lang="scss">
.column-content {
  .group-box {
    .checkbox-box {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &:hover .operation-box {
        display: block;
      }
      .operation-box {
        display: none;
        .column-icon {
          margin: 0 5px;
          font-size: 20px;
        }
      }
    }
  }
}
:deep(.el-checkbox) {
  width: 100%;
  padding: 6px 15px;
  &:hover {
    background-color: #f3f3f3;
  }
}
:deep(.el-checkbox__label) {
  width: 100%;
}
::-webkit-scrollbar {
  width: 0px;
}
</style>
